<!-- MyCustomComponent.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Select } from 'ant-design-vue';

import { loadMaterialUnitPageApi } from '#/api';

interface MaterialUnitProps {
  // eslint-disable-next-line vue/require-default-prop
  unitType?: string;
}

defineOptions({
  name: 'MaterialUnitSelect',
});
const props = withDefaults(defineProps<MaterialUnitProps>(), {});
const modelValue = defineModel<string>();
const options = ref<any[]>([]);

async function generateOptions(unitType?: string) {
  const result = await loadMaterialUnitPageApi({
    unitType,
    size: 100,
    searchCount: false,
    current: 1,
    orders: [{ column: 'order_no' }],
  });
  return result.records.map((item: any) => ({
    label: item.unitName,
    value: item.unitId,
  }));
}

onMounted(async () => {
  options.value = await generateOptions(props.unitType);
});
</script>
<template>
  <Select
    v-model:value="modelValue"
    :allow-clear="true"
    :filter-option="false"
    :options="options"
    :placeholder="$t('common.placeholder.select')"
    class="min-w-60"
  />
</template>
